<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:fragment="head">
        <title>Mandarin - Librarian</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- plugins:css -->
        <link rel="stylesheet" th:href="@{/admin/vendor/font-awesome/css/fontawesome-all.min.css}">
        <link rel="stylesheet" th:href="@{/librarian/node_modules/mdi/css/materialdesignicons.min.css}">
        <link rel="stylesheet" th:href="@{/librarian/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css}">
        <link rel="stylesheet" th:href="@{/librarian/node_modules/icheck/skins/all.css}" />
        <link rel="stylesheet" th:href="@{/librarian/node_modules/select2/dist/css/select2.min.css}" />
        <link rel="stylesheet" th:href="@{/librarian/node_modules/select2-bootstrap-theme/dist/select2-bootstrap.min.css}" />
        <link rel="stylesheet" th:href="@{/librarian/css/style.css}" />
    </th:block>
</head>
<body>

<th:block th:fragment="navbar">
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
            <a class="navbar-brand brand-logo" href="../../index.html"><img th:src="@{/librarian/images/Logo.png}" alt="Logo"/></a>
            <a class="navbar-brand brand-logo-mini" href="../../index.html"><img th:src="@{/librarian/images/logo-mini.svg}" alt="logo"/></a>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-stretch">

            <ul class="navbar-nav navbar-nav-right">

                <li class="nav-item nav-logout d-none d-lg-block">
                    <a class="nav-link" th:href="@{/librarian/login}">
                        <i class="mdi mdi-power"></i>
                    </a>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
</th:block>

<th:block th:fragment="sidebar">
    <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">
                    <span class="menu-title">Home</span>

                    <i class="mdi mdi-home menu-icon"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false"
                   aria-controls="ui-basic">
                    <span class="menu-title">Reader Manage</span>
                    <i class="menu-arrow"></i>
                    <i class="mdi mdi-crosshairs-gps menu-icon"></i>
                </a>
                <div class="collapse" id="ui-basic">
                    <ul class="nav flex-column sub-menu">
                        <li class="nav-item"><a class="nav-link" href="ifoModification.html">Reader Management</a></li>
                        <li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
                        <li class="nav-item"><a class="nav-link" href="lendbookreturn.html">Lend and Return</a>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="category.html">
                    <span class="menu-title">Category Manage</span>
                    <i class="mdi mdi-contacts menu-icon"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="bookManage2.html">
                    <span class="menu-title">Book Manage</span>
                    <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="history.html">
                    <span class="menu-title">Delete History</span>
                    <i class="mdi mdi-chart-bar menu-icon"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" href="#inc" aria-expanded="false"
                   aria-controls="inc">
                    <span class="menu-title">System Income</span>
                    <i class="menu-arrow"></i>
                    <i class="mdi mdi-crosshairs-gps menu-icon"></i>
                </a>
                <div class="collapse" id="inc">
                    <ul class="nav flex-column sub-menu">
                        <li class="nav-item"><a class="nav-link" href="totalIncome.html">Total</a></li>
                        <li class="nav-item"><a class="nav-link" href="totalDeposit.html">Total Deposit</a></li>
                        <li class="nav-item"><a class="nav-link" href="totalFine.html">Total Fine</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="postManage.html">
                    <span class="menu-title">Post Manage</span>
                    <i class="mdi mdi-chart-bar menu-icon"></i>
                </a>
            </li>
        </ul>
    </nav>
</th:block>

<th:block th:fragment="footer">
    <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2019</span>
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><i class="mdi mdi-heart text-danger"></i></span>
        </div>
    </footer>
</th:block>

<th:block th:fragment="scripts">
    <script th:src="@{/librarian/node_modules/jquery/dist/jquery.min.js}"></script>
    <script th:src="@{/librarian/node_modules/popper.js/dist/umd/popper.min.js}"></script>
    <script th:src="@{/librarian/node_modules/bootstrap/dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/librarian/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js}"></script>
    <script th:src="@{/librarian/node_modules/icheck/icheck.min.js}"></script>
    <script th:src="@{/librarian/bower_components/typeahead.js/dist/typeahead.bundle.min.js}"></script>
    <script th:src="@{/librarian/node_modules/select2/dist/js/select2.min.js}"></script>
    <script th:src="@{/librarian/js/off-canvas.js}"></script>
    <script th:src="@{/librarian/js/misc.js}"></script>
    <script th:src="@{/librarian/js/file-upload.js}"></script>
    <script th:src="@{/librarian/js/iCheck.js}"></script>
    <script th:src="@{/librarian/js/typeahead.js}"></script>
    <script th:src="@{/librarian/js/select2.js}"></script>
    <script th:src="@{/librarian/js/JsBarcode.all.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
    <script>
        function getFormData(dic) {
            formData=new FormData();
            for (var key in dic)
                formData.append(key, dic[key]);
            return formData;
        }
        function padNumber(num){
            num=""+num
            for (var i=num.length; i<10; i++)
                num="0"+num;
            return num
        }

        function alertSuccess(message, time=4000){
            myAlert("success", "Success!", message, time);
        }

        function alertError(message, time=4000) {
            myAlert("danger", "Error!", message, time);
        }

        function alertWarning(message, time=4000) {
            myAlert("warning", "Warning!", message, time);
        }

        var alertCounter = 0;

        $("<div />", {
            style: "position: fixed; top: 60px; width: 30%; left: 35%",
            id: "alertBoxDiv"
        }).appendTo($("body"));
        function myAlert(cls, head, message, time){
            var html=
                "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\" style=\"margin-left: 10px;\">&times;</a>\n" +
                "<strong>"+head+"</strong> " + message + " \n";

            var id = "alertDiv"+ alertCounter++;
            $("<div />", {
                "class": "alert alert-"+cls,
                id: id
            }).appendTo($("#alertBoxDiv"));

            $("#"+id).append(html);

            $("#"+id).fadeIn(100, function(){
                setTimeout(function(){
                    $("#"+id).fadeOut(100, function () {
                        $("#"+id).remove();
                    });
                }, time);
            })
        }
    </script>
</th:block>

</body>
</html>